import 'package:flutter/material.dart';

class SearchHot extends StatefulWidget {
  const SearchHot({super.key});

  @override
  State<SearchHot> createState() => _SearchHotState();
}

class _SearchHotState extends State<SearchHot> {
  bool deleteState = false;

  Widget SearchHotItemBuilder({String content = ''}) {
    return Stack(
      clipBehavior: Clip.none,
      children: [
        Container(
          margin: EdgeInsets.symmetric(vertical: 4),
          padding: EdgeInsets.symmetric(horizontal: 12, vertical: 6),
          decoration: BoxDecoration(
            color: Colors.grey[200],
            borderRadius: BorderRadius.circular(6),
          ),
          child: Text(content),
        ),
        this.deleteState
            ? Positioned(
                right: -4,
                top: -2,
                child: GestureDetector(
                  onTap: () => {},
                  child: Container(
                    width: 14,
                    height: 14,
                    decoration: BoxDecoration(
                      color: Colors.red,
                      shape: BoxShape.circle,
                    ),
                    child: Icon(Icons.close, size: 10, color: Colors.white),
                  ),
                ),
              )
            : SizedBox.shrink(), // 完全隐藏不占空间
      ],
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: SearchBar()),
      body: Padding(
        padding: EdgeInsets.only(left: 20, right: 20, top: 20),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          spacing: 20,
          children: [
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Text(
                  '热门搜索',
                  style: TextStyle(fontSize: 16, fontWeight: FontWeight.w700),
                ),

                TextButton(
                  onPressed: () {
                    setState(() {
                      deleteState = !deleteState;
                    });
                  },
                  child: Text(
                    this.deleteState ? '取消删除' : '切换删除',
                    style: TextStyle(color: Colors.black54),
                  ),
                ),
              ],
            ),
            Wrap(
              alignment: WrapAlignment.start,
              spacing: 8.0, // 水平间距
              runSpacing: 4.0, // 垂直间距
              children: [
                SearchHotItemBuilder(content: '地球人阿天'),
                SearchHotItemBuilder(content: '地球人阿天'),
                SearchHotItemBuilder(content: '地球人阿天'),
                SearchHotItemBuilder(content: '地球人阿天'),
                SearchHotItemBuilder(content: '地球人阿天'),
                SearchHotItemBuilder(content: '地球人阿天'),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

// 搜索框
class SearchBar extends StatelessWidget {
  const SearchBar({super.key});

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
      child: Row(
        children: [
          //  回退按钮
          // SizedBox(
          //   width: 26,
          //   child: IconButton(
          //     icon: const Icon(Icons.arrow_back_ios, color: Colors.black38),
          //     onPressed: () => Navigator.of(context).pop(),
          //   ),
          // ),
          //   搜索框
          Expanded(
            child: TextField(
              style: TextStyle(fontSize: 14),
              decoration: InputDecoration(
                hintText: '地球人阿天',
                border: OutlineInputBorder(
                  borderRadius: BorderRadius.circular(18),
                  borderSide: BorderSide.none,
                ),
                // 设置背景色
                filled: true,
                fillColor: Colors.black12,
                //限制高度
                constraints: BoxConstraints(minHeight: 40, maxHeight: 50),
                prefixIcon: const Icon(
                  Icons.search,
                  size: 24,
                  color: Colors.black38,
                ),
              ),
            ),
          ),
          Container(
            width: 60,
            height: 40,
            decoration: BoxDecoration(
              color: Colors.red,
              borderRadius: BorderRadius.circular(6),
            ),
            margin: EdgeInsets.only(left: 10),
            child: Center(
              child: TextButton(
                onPressed: () {
                  Navigator.pushNamed(context, '/goods/list');
                },
                child: Text(
                  '搜索',
                  style: TextStyle(fontSize: 14, color: Colors.white),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}
